import { createRouter, createWebHashHistory } from 'vue-router'
import store from '@/store'
import { menuTree } from '@/apis/personal'

import Layout from '@/layout/index.vue'

// 页面
const Login = () => import("@/views/login/index.vue")
const PersonalIndex = () => import("@/views/personal/index.vue")
const PersonalMessage = () => import("@/views/personal/Message.vue")
// const AppIndex = () => import("@/views/app/Index.vue")

const NotFound = () => import("@/views/404.vue")

// 应用管理
const AppDept = () => import('@/views/app/Dept.vue')
const AppResource = () => import('@/views/app/Resource.vue')
const AppRole = () => import('@/views/app/Role.vue')
const AppUser = () => import('@/views/app/User.vue')

// 系统管理
const SysNotice = () => import('@/views/sys/Notice.vue')
const SysUser = () => import('@/views/sys/User.vue')

// 审计管理
const LogsOperation = () => import('@/views/logs/Operation.vue')
const LogsVisit = () => import('@/views/logs/Visit.vue')



const routes = [
    {
        path: '/',
        name: 'Home',
        component: Layout,
        children: [
            {
                path: 'login',
                name: 'Login',
                component: Login
            },
            {
                path: 'personal',
                name: 'Personal',
                component: PersonalIndex,
                children: [
                    {
                        path: 'message',
                        name: 'PersonalMessage',
                        component: PersonalMessage
                    },
                ]
            },
            // 应用管理的路由
            {
                path: '/app',
                name: 'App',
                children: [
                    {
                        path: 'user',
                        name: 'AppUser',
                        component: AppUser
                    },
                    {
                        path: 'dept',
                        name: 'AppDept',
                        component: AppDept
                    },
                    {
                        path: 'role',
                        name: 'AppRole',
                        component: AppRole
                    },
                    {
                        path: 'resource',
                        name: 'AppResource',
                        component: AppResource
                    },
                ]
            },
            // 系统管理的路由
            {
                path: '/sys',
                name: 'Sys',
                children: [
                    {
                        path: 'user',
                        name: 'SysUser',
                        component: SysUser
                    },
                    {
                        path: 'notice',
                        name: 'SysNotice',
                        component: SysNotice
                    },
                ]
            },
            // 审计管理的路由
            {
                path: '/logs',
                name: 'Logs',
                children: [
                    {
                        path: 'visit',
                        name: 'LogsVisit',
                        component: LogsVisit
                    },
                    {
                        path: 'operation',
                        name: 'LogsOperation',
                        component: LogsOperation
                    },
                ]
            },
            {
                path: '404',
                name: 'NotFound',
                component: NotFound
            }
        ]
    },
    // {
    //     path:'/:pathMatch(.*)*',
    //     name:'404',
    //     redirect:'/404'
    // }
]


const router = createRouter({
    history: createWebHashHistory(),
    routes
})

/**
 * 1. 如果是去登录页且已经登录，则直接跳转第一个导航
 * 2. 如果是首页，则直接跳转到第一个导航
 */

// 路由拦截守卫
router.beforeEach(async (to) => {
    // console.log('to', to);

    // 判断是否登录
    const isLogin = store.getters['user/isLogin']

    // 如果是去登录页且已经登录，则直接跳转第一个导航
    if (to.path === '/login') {
        if (isLogin) {
            return store.state.firstRoute
        }
        return true
    }

    // 判断菜单是否加载
    if (store.state.routeLoaded) {
        return true
    }

    // 菜单的初始化
    await initMenu()
    // 获取菜单之后，跳转第一个路由
    const { state: { firstRoute } } = store
    // 如果是首页，则直接跳转到第一个导航
    if (to.path === '/' && firstRoute) {
        return firstRoute
    }
    return true
})

// 请求菜单
function initMenu() {
    return menuTree()
        .then((res) => {
            const { data } = res
            // console.log('data', data);

            // 菜单/路由已经加载
            store.commit('setRouteLoaded', true)
            // 菜单
            store.commit('setMenuTree', data)
            // 默认打开的第一个路由
            store.commit('setFirstRoute', data[0].children[0].path)
        })
}

export default router